<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
	</style>
	<body>
		<div id="color"></div>
		<canvas id="canvas" width="400" height="300"></canvas>
		<label>
			<input type="checkbox" id="iskjc"> 是否开启抗锯齿
		</label>
		<div style="margin-left: 500px;">
		<canvas id="show" width="200"  height="200"></canvas>
		</div>
		<script type="text/javascript">
			var img = new Image();
			img.src = './img/111.png';
			var canvas = document.getElementById('canvas');
			var ctx = canvas.getContext('2d');
			var canvas2 = document.getElementById('show');
			var ctx2 = canvas.getContext('2d');
			img.onload = function() {
				
				ctx.drawImage(img,0,0);
				function scale(event){
					let x = event.layerX;
					let y = event.layerY;
					ctx2.drawImage(canvas,Math.abs(x-5),Math.abs(y-5),20,20,0,0,200,200);
				}
				canvas.addEventListener("mousemove",function(event){
					scale(event);
				})
				
				let iskjc = document.getElementById("iskjc");
				
				function changeKJC(event){
					ctx2.imageSmoothingEnabled = this.checked;
					ctx2.mozImageSmoothingEnabled = this.checked; 
				}
				iskjc.onchange = changeKJC;
				
				
				
				
				
				
				
				
				
				
				
			};
			
			
		</script>
	</body>
</html>
